<script>
import { mapState } from 'vuex'

export default {
  name: 'cardDetail',
  data() {
    return {
      loading: false
    }
  },
  methods: {
    /* 获取月卡详情的回调函数 */
    async fetchCardDetail(id) {
      try {
        this.loading = true
        await this.$store.dispatch('monthCardStore/fetchCardDetail', id)
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
    }
  },
  emits: ['back'],
  computed: {
    ...mapState('monthCardStore', ['cardDetail'])
  }
}
</script>

<template>
  <div class="cardDetail">
    <el-card shadow="never">
      <template #header>
        <span>车辆信息</span>
      </template>
      <el-row>
        <el-col :span="12">
          <span>车主姓名:{{ cardDetail.personName }}</span>
        </el-col>
        <el-col :span="12">
          <span>联系方式:{{ cardDetail.phoneNumber }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <span>车牌号码:{{ cardDetail.carNumber }}</span>
        </el-col>
        <el-col :span="12">
          <span>车辆品牌:{{ cardDetail.carBrand }}</span>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <template #header>
        <span>月卡缴费记录</span>
      </template>
      <el-table :data="cardDetail.rechargeList" size="small" stripe border v-loading="loading" element-loading-text="拼命加载中">
        <el-table-column type="index" label="序号" align="center"></el-table-column>
        <el-table-column label="有效时间" align="center">
          <template #default="{row}">{{ row.cardStartDate }}-{{ row.cardEndDate }}</template>
        </el-table-column>
        <el-table-column prop="paymentAmount" label="支付金额" align="center"></el-table-column>
        <el-table-column prop="paymentMethod" label="支付方式" align="center"></el-table-column>
        <el-table-column prop="createTime" label="办理时间" align="center"></el-table-column>
        <el-table-column prop="createUser" label="办理人" align="center"></el-table-column>
      </el-table>
      <el-button type="info" size="small" @click="$emit('back')">返回</el-button>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.cardDetail {
  .el-card {
    margin-bottom: 10px;

    .el-row {
      margin: 10px 0;

      span {
        color: #9d9d9d;
      }
    }

    .el-table {
      margin: 10px 0;
    }
  }
}
</style>
